<template>
  <div class="py-24">
    <van-form inset @submit="add">
      <!-- 输入任意文本 -->
      <van-field
        v-model="route.query.storeName"
        label="所属门店"
        disabled
        required
      />
      <van-field
        v-model="formState.realName"
        label="姓名"
        required
        placeholder="点击输入员工姓名"
        :rules="[{ required: true, message: '请输入员工姓名' }]"
      />
      <van-field
        v-model="formState.username"
        type="tel"
        label="手机号"
        required
        placeholder="点击输入手机号"
        :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <van-field
        v-model="formState.password"
        type="password"
        label="默认密码"
        required
        placeholder="点击输入默认密码"
        :rules="[{ required: true, message: '请输入默认密码' }]"
      />
      <van-field
        v-model="formState.comfirmPwd"
        type="password"
        label="确认密码"
        required
        placeholder="再次确认密码"
        :rules="[
          { required: true, message: '请再次确认密码' },
          {
            validator: validatorPwd,
            message: '两次密码不一致',
          },
        ]"
      />
      <!-- <div class="btn" @click="add">确认添加</div> -->
      <van-button round block type="primary" native-type="submit" class="btn"
        >确认添加</van-button
      >
    </van-form>
  </div>
</template>

<script setup>
import { postMpShopUserAdd } from "@/api";
import { Notify } from "vant";
const route = useRoute();
const router = useRouter();
const formState = reactive({
  store: "宝安1店",
  realName: "",
  username: "",
  password: "",
  comfirmPwd: "",
});
const validatorPwd = (val) => {
  return val == formState.password;
};
const add = () => {
  postMpShopUserAdd(formState).then((res) => {
    Notify({ type: "success", message: "添加成功" });
    router.go(-1);
  });
};
</script>

<style lang="less" scoped>
:deep(.van-field__label) {
  width: 180px;
  margin-right: 60px;
  label {
    display: inline-block;
    // width: 100%;
    width: calc(100% - 25px);
    text-align-last: justify;
  }
}
.btn {
  margin: 150px auto;
  height: 80px;
  line-height: 80px;
  width: 600px;
  text-align: center;
  font-size: 30px;
  background: #fedc00;
  border-radius: 10px;
}
</style>
